<template>
	<view class="container">
		<view class="welcome-message">
			<h1 class="welcome-title">欢迎来到百度</h1>
			<p class="welcome-content">
				在这里，您可以搜索到您想要的任何信息。百度，让复杂的世界更简单。
			</p>
		</view>
		<button class="search-btn" @click="goToSearch">开始搜索</button>
	</view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const timeLeft = ref(10); // 倒计时秒数
let timer;

// 倒计时函数
function startCountdown() {
	timer = setInterval(() => {
		if (timeLeft.value > 0) {
			timeLeft.value--;
		} else {
			clearInterval(timer);
			goBack();
		}
	}, 1000);
}

// 清除倒计时
function stopCountdown() {
	if (timer) {
		clearInterval(timer);
	}
}

// 返回之前的页面
function goBack() {
	window.history.back();
}

// 跳转到百度搜索页面的函数
function goToSearch() {
	window.location.href = 'https://www.baidu.com';
	startCountdown(); // 开始倒计时
}

// 重置倒计时
function resetCountdown() {
	stopCountdown();
	timeLeft.value = 10;
}

// 组件挂载时清除可能的计时器
onMounted(() => {
	stopCountdown();
});

// 组件卸载时清除倒计时
onUnmounted(() => {
	stopCountdown();
});

// 监听用户操作事件，重置倒计时
document.addEventListener('click', resetCountdown);
document.addEventListener('keypress', resetCountdown);
</script>

<style>
.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	background-color: #f8f8f8;
	font-family: Arial, sans-serif;
}

.welcome-message {
	text-align: center;
}

.welcome-title {
	font-size: 36px;
	color: #333;
	margin-bottom: 10px;
}

.welcome-content {
	font-size: 20px;
	color: #666;
	margin-bottom: 30px;
}

.search-btn {
	background-color: #3c8dbc;
	color: white;
	border: none;
	font-size: 18px;
	padding: 15px 30px;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.search-btn:hover {
	background-color: #367fa9;
}
</style>
